<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="pragma" content="no-cache">  
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">  
<meta http-equiv="expires" content="0">  
<title>图片上传裁剪</title>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/bower_components/bootstrap/dist/css/bootstrap.min.css" media="all">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/bower_components/bootstrap/dist/css/bootstrap-theme.min.css" media="all">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/jquery.imgareaselect-0.9.10/css/imgareaselect-default.css" media="all" >
<link rel="stylesheet" type="text/css" href="__PUBLIC__/uploadify/uploadify.css" media="all" >

<script data-main="__PUBLIC__/js/main" type="text/javascript" src="__PUBLIC__/js/require.min.js"></script>
<style type="text/css">
#image-uploaded,
#image-cuted{
    position:relative;
    max-width:100%;
}
#cut-preview-wrap{
    position:relative;
    display:block;
    padding:0;
    margin:0;
    border:0;
    width:100%;
    overflow:hidden;
}
#cut-preview{
    position:absolute;
    padding:0;
    margin:0;
    border:0;
    top:0;
    left:0;
}
</style>
</head>
<body>
<div class="container">
    <div class="page-header">
        <h1>
            图片上传裁剪 
        <small>( Uploadify + imgAreaSelect + PHP )</small>
        <small class="pull-right">by mc-zone</small>
        </h1>
    </div>

    <div class="row">
        <div class="col-xs-3">
        <label for="">图片上传</label>

            <div id="upload-wrap" style="margin-top:40px;">
                <input type="file"  id="file" name="file" />
                <a id="anew" style="display:none;" class="btn btn-info" href="#">取消重传</a>
                <br>
                <div class="col-xs-12" id="ratio-wrap" style="margin-top:30px;display:none;">
                    <div id="ratio-input" class="input-group">
                        <span class="input-group-addon">裁剪宽高比</span>
                        <input type="text" id="ratio" class="form-control" placeholder="Ratio" value="1.33">
                     </div>
                    <span id="cut-help" class="help-block">输入宽高比进行裁剪初始化。例如1.33</span>
                    <p>
                        <a id="cutInit" class="btn btn-info" href="#">裁剪区域初始化</a>
                    </p>
                </div>
                <a id="cut" style="margin-top:30px;display:none;" class="btn btn-warning" href="#">确定裁剪区</a>
            </div>
        </div>
        <div class="col-xs-4">
            <label for="">裁剪区域</label>
            <div class="row">
                <div class="col-xs-12" id="uploaded-wrap" style="display:none;">
                </div>
            </div>
        </div>
        <div class="col-xs-4" id="preview-wrap" style="display:none;">
            <label for="">裁剪预览</label>
            <div id="cut-preview-wrap">
                <img id="cut-preview" src="" alt="">
            </div>
            <p>
                <small id="log"></small>
            </p>
            
        </div>
    </div>

    <div class="row" id="cuted-wrap" style="display:none;">
        <div class="col-xs-offset-2 col-xs-8 text-center">
            <div class="page-header">
                <h4>成品</h4>
            </div>
            <p>
                <img id="image-cuted" src="" alt="">
            </p>
            <p>
                <a id="download" style="display:none;" class="btn btn-block btn-danger" href="#">下载成品</a>
            </p>

        </div>
    </div>

</div>

</body>
</html>
